<template>
  <div class="input-container">
    <el-form @submit.prevent="handleSearch">
      <el-input v-model="keyword" :placeholder="props.placeholder">
        <template #append>
          <el-button :icon="Search" native-type="submit" />
        </template>
      </el-input>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { complexSearchApi } from "@/apis/search";
import { ElMessage } from "element-plus";

const props = defineProps({
  inputConfig: () => ({} as any),
  type: {
    type: Number,
    default: 0,
  },
  value: {
    type: Array,
    default: () => [],
  },
  pageParam: {
    type: Object,
    default: () => ({
      page: 1,
      size: 10,
    }),
  },
  placeholder: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["searchResult"]);

function searchResult(data: any) {
  emit("searchResult", data);
}

const keyword = ref("");

const searchParams = {
  type: 1,
  value: [] as any,
  keyword: "",
  pageParam: {
    page: 1,
    size: 10,
  },
};

async function handleSearch() {
  searchParams.keyword = keyword.value;
  try {
    const res: any = await complexSearchApi(searchParams);
    if (res.code === 0) {
      searchResult(res.data);
    } else {
      ElMessage.error("搜素失败");
    }
  } catch (error) {
    ElMessage.error("请求错误");
  }
}

onMounted(() => {
  searchParams.pageParam.page = props.pageParam.page;
  searchParams.pageParam.size = props.pageParam.size;
  searchParams.value = props.value;
  searchParams.type = props.type;
});
</script>

<style scoped>
.input-container {
  width: 600px;
  min-width: 100px;
  margin-bottom: 1em;
}

:deep(.el-button) {
  border-radius: 0 4px 4px 0;
  color: white !important;
  background-color: var(--el-color-primary) !important;
}
</style>
